<template>
  <div class="command-dispatch-main">
    <div class="head-content">
      <HeadMenu :activePage="activePanel"/>
    </div>
    <div class="main-content">
      <div ref = "leftDivId" class="device-list" v-if="leftBtn.showBox"  >
        <div style="width: 100%;height: 32px;">
          <!--background-color: rgb(19,48,122)">-->
          <template v-for="item in h5.items">
            <Tag checkable style="height: 28px" class="tag-class" ref="item.name" name="item.name" color="primary" size="medium" :checked="item.checked" @on-change="tag.change(item.id)">
              {{item.desc}}</Tag>
          </template>
        </div>
        <div v-if="tag.checkedId===1">
          <GbOrgDeviceTree ref="GbOrgDeviceTree"
                           @device-refresh="deviceRefresh"
                           @chn-node-click="chnClick"
                           @on-offline-click="chnOfflineClick"
                           @on-playbtnclick="playBtnClick"
                           @on-select-change="selectChange"></GbOrgDeviceTree>
        </div>
        <div v-if="tag.checkedId===2" style="width: 100%;height: 100%;background-color: #ffffff">
          <DeviceFavoriteTree ref="DeviceFavoriteTree"
                              @device-refresh="deviceRefresh"
                              @chn-node-click="chnClick"
          />
        </div>
        <div v-if="tag.checkedId===3" style="width: 100%;height: 100%;background-color:#FFFFFF">
          <ZzdGroupUserTree ref="zzdGroupUserTree"
                            @usr-node-click="zzd.usrNodeClick"
          ></ZzdGroupUserTree>
        </div>
      </div>
      <div ref="mapDiv1" class="map-content" >
        <Mapframe ref="mapframe"
                  :showMenuTools="showMenuTools"
                  @mapInfoEvent="getMapInfo"
                  @locateEvent="getLocate"
                  @popupBtnClick="popupBtnClick"
                  :device-data="MapframeData"></Mapframe>
      </div>
    </div>
    <div class="left-expland-collapsible-button" :style="leftBtn.buttonStyle">
      <Button type="default"
              :Title="leftBtn.title"
              :icon="leftBtn.icon"
              style="margin-left: -2px" @click="leftBtnClick"/>
    </div>

    <div class="other-modal">
      <!--    <监听播放器>-->
      <RtcAudioPlayer ref="auioPlayer1"/>
      <!--    <视频对讲>-->
      <VideoCallDialog ref="videoCallDialog"></VideoCallDialog>
      <!--    <语音对讲>-->
      <AudioCallDialog ref="audioCallDialog"></AudioCallDialog>

      <DeviceInfo ref="deviceInfo"></DeviceInfo>

      <TrackMap ref="rackMap"></TrackMap>

      <VideoReplay ref="videoReplay">/</VideoReplay>
      <!-- 视频对讲   -->
<!--      <TestH5MicAudio ref="testH5MicAudio"/>-->

      <Modal  v-model="player.show"  :loading="player.loading" :title="player.title"
              :mask-closable="false"
              :footer-hide=false
              width="850px"
              :closable="true"
              @on-visible-change = "onModalVisiblechange">
        <div style="width:800px; height: 500px;">
          <CommPlayer v-if="livePlayer===2" ref="CommPlayer1" :scale="scale" :customStyle="playerBgStyle"></CommPlayer>
          <RtcWithTalkPlayer v-if="livePlayer===1"
                             :id="rtcPlayer.id"
                             :ref="rtcPlayer.ref"
                             :videoId="rtcPlayer.videoId"/>
        </div>

      </Modal>
    </div>
      <Modal  v-model="audioPlayShow"
              title="11"
              :mask-closable="false"
              :footer-hide=true
              width="400px"
              :closable="false">
      </Modal>
    <DragRtcPlayer ref="dragRtcPlayer"></DragRtcPlayer>
    <EnterAesPasswordDialog ref="enterAesPasswordDialog">></EnterAesPasswordDialog>
<!--    <div id="dialog" style="width: 200px; height: 100px; background-color: #ddd; position: absolute; cursor: move;">
      拖动我
    </div>-->
  </div>
</template>
<script>
import Mapframe from "@/view/Home/map/Mapframe";
import TrackMap from "@/view/Home/map/TrackMap";

import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import MainFooterMenu from "@/view/Home/component/MainFooterMenu";
import Device from '@/api/Device';
import DeviceFavorite from '@/api/DeviceFavorite';
import DrawerFootButton from "@/view/Home/component/DrawerFootButton";
import DrawerLeftButton from "@/view/Home/component/DrawerLeftButton";
import DrawerFoot from "@/view/Home/component/DrawerFoot";
import DeviceInfo from "@/view/Home/utils/DeviceInfoDialog";

import HeadMenu from "@/view/Home/component/HeadMenu";
import GbDevicetree1 from "_c/topnav/GbDeviceTree1";
import GbDevicetree from "_c/topnav/GbDeviceTree";
import GbOrgDeviceTree from "_c/topnav/GbOrgDeviceTree";
import ZzdGroupUserTree from "@/view/zzd/ZzdGroupUserTree";
import DeviceFavoriteTree from "_c/topnav/DeviceFavoriteTree";

import TreeTest from "_c/topnav/TreeTest";
import CommPlayer from "@/view/Home/component/CommPlayer";
import RtcWithTalkPlayer from '@/view/Home/component/RtcWithTalkPlayer.vue';
import DragRtcPlayer from '@/view/Home/component/DragRtcPlayer.vue';
import RtcAudioPlayer from '@/view/Home/component/RtcAudioPlayer.vue';
import VideoCallDialog from "@/view/Home/utils/VideoCallDialog";
import AudioCallDialog from "@/view/Home/utils/AudioCallDialog";
import VideoReplay from "@/view/Home/utils/VideoReplay";
import config from "@/config";
import {apiResult} from "@/libs/util";
import EnterAesPasswordDialog from '@/view/Home/utils/EnterAesPasswordDialog';

export  default {
  components: {
    Mapframe,TrackMap,MainTopMenuPanel,MainFooterMenu,DrawerFootButton,
    DrawerLeftButton,DrawerFoot,
    GbOrgDeviceTree,ZzdGroupUserTree,DeviceFavoriteTree,TreeTest,
    CommPlayer,RtcWithTalkPlayer,DragRtcPlayer,RtcAudioPlayer,VideoReplay,DeviceInfo,VideoCallDialog,AudioCallDialog,HeadMenu,
    EnterAesPasswordDialog},
  computed:{
    drawerFootDisplay(){
      return this.drawerFoot.display;
    },
    drawerFootBtnDisplay(){
      return this.drawerFoot.display;
    },
    h5(){
      return{
        items:[
          {id:1,name:"deviceList",desc:this.$t('device_list'),checked:true},//设备列表
          {id:2,name:"attention",desc:this.$t('device_favorite'),checked:false},//"收藏"
          {id:3,name:"grouptalk",desc:this.$t('cluster_intercom'),checked:false},//"集群对讲"
        ],
      }
    }
  },
  watch:{
    footActive(oldValue,newValue){
      this.footRightBoxCloseOrOpen();
    },
    rightActive(){
      this.footRightBoxCloseOrOpen();
    }
  },
  data(){
    return{

      tag:{
        checkedId: 1,

        change:(id)=>{
          //console.log(id)
          this.tag.checkedId = id;
          this.h5.items.forEach((item)=>{
            if (item.id === id){
              item.checked = true;
            }else{
              item.checked = false;
            }
          });
        }
      },

      audioPlayShow:false,
      livePlayer: config.livePlayer()==='ZlmRtcClient'?1:2,
      talk:{
        show: false,
        title: this.$t('talk_page'),//"对讲对话框"
      },
      leftBtn:{
        state: 1, //0关闭 1展开
        icon:"ios-arrow-back",
        title: this.$t('close'),//"关闭",
        showBox: true,
        left: "0px",
        buttonStyle:{left: "301px"},
        boxWidth:0
      },
      player:{
        show:false,
        title:"",
        loading:false
      },
      showMenuTools:true,//地图是否显示菜单栏
      playerActive: 'border:1px solid #F00', //播放器选中时的边框
      playerUnActive: 'border:1px solid #14edc5', //播放器没选中时的边框
      currentPlayerBoxNum: -1,//当前选中播放器的序号

      playerBgStyle:{ //播放器背景颜色
        backgroundColor: 'rgb(175,175,176)'
      },
      scale:false,
      activePanel:0,

      //leftBoxStyle:{display: 'block'},
      //mapBoxStyle:{width: "calc(~'100% - 100px')"},

      footBoxStyle:{
        left:"300px",
        bottom:"0px"
      },
      //leftActive:false,

      rightBoxStyle:{bottom: '180px',right:'-400px'},
      tagBoxStyle:{right:'0px',bottom: '10px'},

      rightActive:false,
      footActive:false,

      drawerHeight:'60%',
      drawerWidth:'300px',

      api: new Device(),
      apiFavorite: new DeviceFavorite(),
      devDatas:[],
      MapframeData:null,
      //mapInfo:null,
      currentMapInfo:"《ArcGis 影像》，级别：11",
      currentLocate:"112.34353, 22.343553",

      drawerFoot:{
        drawerHeight:'180px',
        drawerWidth:'600px',
        drawerRight:'0',
        inner:false,
        display: false,
        mask: true,
      },
      playerPanels:[ //播放面板
        {id:0,ref:'playerBox1',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer1",active:false},
        {id:1,ref:'playerBox2',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer2",active:false},
        {id:2,ref:'playerBox3',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer3",active:false},
        {id:3,ref:'playerBox4',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer4",active:false},
        {id:4,ref:'playerBox5',style:'border:1px solid #14edc5',playerRef:"jsTrackPLayer5",active:false},
      ],
      playerScale:false,
      rtcPlayer: {
        id:1,
        ref:"rtcWithTalkPlayer1",
        videoId:"dispatchRtcPlayer1"
      },
      zzd:{
        usrNodeClick:(event)=>{
         //群组按钮点击
         /**
          * newGroup 新群组
          * delGroup 删除群组
          * clearFromGroup 移除设备
          * addToGroup 加入设备
          * removeUser 移除设备
         */


        }
      }
    }
  },
  methods:{

    /**
     * 地图改变后
     */
    getMapInfo(event){
      this.currentMapInfo=event;
    },
    /**
     * 取当前定位信息
     */
    getLocate(event){
      this.currentLocate=event;
    },

    /**
     * 当底部栏和右边栏关闭或打开时
     */
    footRightBoxCloseOrOpen(){
      if (this.rightActive){
        this.rightBoxStyle.right = '0px';
        this.tagBoxStyle.right="400px";
      }else{
        this.rightBoxStyle.right = '-400px';
        this.tagBoxStyle.right="400px";
      }

      if (this.footActive == false ){
        //this.tagBoxStyle.bottom="0px";
        this.rightBoxStyle.bottom='0px';
      }else {
        //this.tagBoxStyle.bottom = "180px";
        this.rightBoxStyle.bottom='180px';
      }
    },
    rightBoxbtnClick(e){
      this.rightActive=!this.rightActive;
      /*if (this.rightActive){
        this.tagBoxStyle.right="500px";
      }else{
        this.tagBoxStyle.right="50px";
      }*/
    },
    footBtnClick(){
      this.footActive = !this.footActive;
      if (this.footActive){
        this.rightBoxStyle.bottom='180px';
        this.tagBoxStyle.bottom='10px';
        this.leftBoxStyle.display="block";

      }else {
        this.rightBoxStyle.bottom='0';
        this.tagBoxStyle.bottom='10px';
        this.leftBoxStyle.display="none";

      }
    },

    playerPanelClick(id){

    },
    playerPanelMouseOver(id){

    },
    playerPanelMouseLeave(id){

    },

    drawerFootBtnClick(show){
      //console.log("show: %o",show);
      /** 底部抽屉按钮点击 */
      this.drawerFoot.display = show;
      if (show){
        this.rightBoxStyle.bottom='180px';
        this.tagBoxStyle.bottom='10px';
      }else {
        this.rightBoxStyle.bottom='0';
        this.tagBoxStyle.bottom='10px';
      }

    },

    leftBtnClick(){


      if (this.leftBtn.state == 1){
        //当前展开状态
        this.leftBtn.state = 0;
        this.leftBtn.icon = "ios-arrow-forward"
        this.leftBtn.title = this.$t('map_tool_unfold')
        this.leftBtn.showBox = false;
        this.leftBtn.buttonStyle.left = "0px";
        //this.mapToolLeft = "0px";
        //this.leftBoxStyle.display="none";
        //this.buttonStyle.left="0px";
        //this.mapBoxStyle.width="calc(~'100% - 0px')";
        //this.showLeftBox = false;

        if (!!this.$refs.leftDivId.offsetWidth){
          this.leftBtn.boxWidth = this.$refs.leftDivId.offsetWidth;
        }

        this.$refs.mapframe.refreshMap();
        //console.log(">>>>>>>>> commDispatch.leftBtnClick: width=%o",this.$refs.leftDivId.offsetWidth );

      }else{
        //当前关闭状态
        this.leftBtn.state = 1;
        this.leftBtn.icon = "ios-arrow-back"
        this.leftBtn.title = this.$t('map_tool_fold')
        this.leftBtn.showBox = true;
        //this.leftActive = true;
        //this.mapToolLeft = "300px";
        //this.leftBoxStyle.display="block";
        //this.buttonStyle.left="301px";
        //console.log(">>>>>>>>>  commDispatch.leftBtnClick: leftBtn.boxWidth=%o",this.leftBtn.boxWidth );
        this.leftBtn.buttonStyle.left = this.leftBtn.boxWidth + "px";

        //this.mapBoxStyle.width="calc(~'100% - 300px')";
        //console.log(">>>>>>>>> commDispatch.leftBtnClick: width=%o",this.$refs.leftDivId.offsetWidth );
        //this.footBoxStyle.left="300px";
        this.$nextTick(() => {
          //console.log(">>>>>>>>>  commDispatch.leftBtnClick: mapframe.refreshMap()");
          this.$refs.mapframe.refreshMap();
        })

      }
      //this.$Message.info(this.$refs.leftDivId.offsetWidth);
    },

    onModalVisiblechange(state){
      if (!state){
        if (this.livePlayer ===1){
          this.$refs.rtcWithTalkPlayer1.stop();
        }else{
          this.$refs.CommPlayer1.stop();
        }

      }
    },
    playerClose(){
      this.player.show=false;
    },
    /**
     *  播放实时视频
     * @param node
     * @param data
     */
    playStart(node, deviceData){
/*      if (!this.footActive){
        this.footActive = true;
      }*/
      const that = this;

      this.$refs.enterAesPasswordDialog.confirm(deviceData,data=>{
        //在线设备
        const deviceId=data.arrt.deviceCode;
        const channelId=data.arrt.channelCode;
        //console.log("通知设备推流：" + deviceId + " : " + channelId);
        if (!(!!deviceId && !!channelId)){
          this.$Message.error(this.$t("data_attribute_missing"));
        }
        this.playerScale =true;

        if (this.livePlayer == 1){
          //WEBRTC播放器
          /*        this.player.show=true;
                  const player = this.$refs["rtcWithTalkPlayer1"];
                  if (!player.isPlaying()){
                    player.openDialog(
                      data.arrt.deviceCode,
                      data.arrt.channelCode,
                      data.arrt.devName,
                      (err)=>{
                        that.$Message.error(err);
                        this.player.show=false;
                      });
                    return;
                  }*/

          //可拖动的webrtc播放器
          this.$refs["dragRtcPlayer"].openDialog(
            data.arrt.deviceCode,
            data.arrt.channelCode,
            null,
            data.arrt.devName,
            (err)=>{
              that.$Message.error(err);
              //this.player.show=false;
            });

        }else  if (this.livePlayer == 2){
          /** 通知设备推流 */
          this.api.playStart(deviceId,channelId).then(res=>{
            apiResult(res.data,false,result=>{
              this.player.show=true;
              this.$refs.CommPlayer1.play(result.data.ws_flv,deviceId,channelId);
            })
          })
        }
      })


/*      console.log(">>>>>> CommandDispatch.playStart: %o",data);
      if (!!data.arrt.streamEncryption){
        let aesKey="";
        this.$Modal.confirm({
          render: (h) => {
            return h('Input', {
              props: {
                value: aesKey,
                autofocus: true,
                placeholder: 'Please enter AES password..'
              },
              on: {
                input: (val) => {
                  aesKey = val;
                }
              }
            })
          },
          onOk: () => {
            if (aesKey != data.arrt.streamEncryption){
              this.$Message.error(this.$t("msg_120008")) //密码错误
              return;
            }
          },
          onCancel: () => {
            return;
          }
        })
      }*/



    },

    chnOfflineClick(node, data){

    },
    playBtnClick(node, data){

    },
    selectChange(node, data){

    },
    /**
     * 当在设备树搜索和选择时
     * 设备数据刷新
     * @param data
     */
    deviceRefresh(data){
      //console.log(">>>>>>>>>>> CommandDispatch.deviceRefresh(): data=%o",data);
      //刷新汇聚数据
      this.MapframeData=[];
      //console.log(">>>>>>>>>>> CommandDispatch.deviceRefresh(): data=%o",data);
      //递归执行处理数据,并保存到 MapframeData数组中
      this.recursiveDevices(data);
      this.$refs.mapframe.refreshCluser(40,20,this.MapframeData)
      //console.log(">>>>>>>>>>> CommandDispatch.deviceRefresh(): MapframeData=%o",this.MapframeData);
      this.$refs.mapframe.showPointer(this.MapframeData);
    },

    recursiveDevices(data,org){
      if (!org){
        org = {};
        org.orgName=null;
        org.devName=null;
        org.parent="org";//org/dev
      }
      //递归设备
      for(let i=0;i<data.length;i++) {
        if (data[i].type == 'org'){
          org.orgName = data[i].title;
          org.parent = "org";
          org.devName = "";
        }
        if (data[i].type == 'dev'){
          org.devName = data[i].title;
          org.parent = "dev";
        }
        if (data[i].type == 'chn') {
          const dev = data[i];
          //console.log(">>>>>>>>>>> CommandDispatch.recursiveDevices(): longitude=%o",dev.longitude);
          if (!dev.longitude){
            //console.log(">>>>>>>>>>> CommandDispatch.recursiveDevices(): longitude=%o",dev.longitude);
            //dev.longitude=this.mapInfo.center[0] + Math.random() * 0.05;
            //dev.latitude=this.mapInfo.center[1] + Math.random() * 0.05;
          }

 /*         let device={
            id: dev.id,
            title: dev.title,
            longitude: !!dev.longitude?dev.longitude:this.mapInfo.center[0] + Math.random() * 0.05,
            latitude: !!dev.latitude?dev.latitude:this.mapInfo.center[1] + Math.random() * 0.05,
            deviceType: dev.deviceType, //普能执法仪，2、4G执法仪, 3、监控摄像头
            online: dev.online, //1 在线，0离线

            orgName:org.orgName,
            devName:org.devName,
            userName:"王警官",
            userCode:"000002",
            direction:"6°",
            speed:25,
            locate:"深圳市龙华区",
            arrt: dev.arrt
          };*/

          this.MapframeData.push(data[i]);
        }

        if (!!data[i].children) {
          this.recursiveDevices(data[i].children,org);
        }
      }
    },

    /**
     * 通道点击
     * @param event
     * @param node
     * @param data
     */
    chnClick(event,node, data){
      /**
       * event:
       * locate 定位
       * liveVideo 实时视频
       * liveAudio 监听
       * videoCall 视频通话
       * audioCall 语音通话
       * takePicture 拍照
       * issueMessage 消息下发
       * favorite 收藏
       * unFavorite 取消收藏
       * track 跟踪
       * nearby 附近
       * deviceInfo 设备信息
       * replay 录像回放
       */
/*      console.log("chnClick(event,node, data): ");
        console.log("node: %o ",node);

      */
      //console.log("event: event=%o,data=%o",event,data);
      if (event === 'locate'){
        //定位
        this.$refs.mapframe.locate(data);
      }else if (event === 'liveVideo'){
        //实时视频
        this.playStart(node,data);
      }else if(event === 'deviceInfo'){
        //设备信息
        this.showDeviceIfo(data);
      }else if(event === 'videoCall'){
        //视频对讲
        this.$refs.enterAesPasswordDialog.confirm(data,data1=>{
          this.$refs.videoCallDialog.openDialog(data1.arrt.deviceCode,data1.arrt.channelCode);
        })

      }else if(event === 'liveAudio'){
        //实时监听
        this.$refs.enterAesPasswordDialog.confirm(data,data1=>{
          this.$refs.auioPlayer1.openDialog(data1.arrt.deviceCode,data1.arrt.channelCode);
        })

        //this.audioPlay.show = true;
      }else if(event === 'audioCall'){
        //语音对讲
        //console.log("audioCall")
        this.$refs.enterAesPasswordDialog.confirm(data,data1=>{
          this.$refs.audioCallDialog.openDialog(data1.arrt.deviceCode,data1.arrt.channelCode);
        })


      }else if(event === 'favorite'){
        //收藏
        this.apiFavorite.add(JSON.stringify({deviceCode:data.arrt.deviceCode})).then(res=>{
          apiResult(res.data,true)
        })
      }else if (event === 'track'){
        //跟踪
        this.$refs.rackMap.openDialog(data);
      }else if (event === 'replay'){
        //replay 录像回放
        //this.$Message.warning("录像回放在建设中......")
        this.$refs.videoReplay.openDialog(data);
      }
    },
    /**
     * 播放器点击
     */
    playerBoxClick(number){
      for(let i in this.playerPanels){
        if (i == number){
          if (this.currentPlayerBoxNum==number){
            // 本来就选中的则取消
            this.playerPanels[i].active = false;
            this.playerPanels[i].style = this.playerUnActive;
            this.currentPlayerBoxNum = -1;

          }else{
            // 没选中的就选 中
            this.playerPanels[i].active = true;
            this.playerPanels[i].style = this.playerActive;
            this.currentPlayerBoxNum = number;
          }
        }else{
          // 其它box 恢复原状态
          this.playerPanels[i].active = false;
          this.playerPanels[i].style = this.playerUnActive;
        }
      }
    },
    /** BOX 移入 事件 */
    boxMouseOver(number) {
      if (!this.playerPanels[number].playerActive){
        this.playerPanels[number].style = this.playerActive;
      }
    },
    /** BOX 移出 事件 */
    boxMouseLeave(number) {
      if (this.currentPlayerBoxNum == number){
        return;
      }
      if (!this.playerPanels[number].playerActive){
        this.playerPanels[number].style = this.playerUnActive;
      }
    },

    popupBtnClick(event,node, data){
      /**
       * event:
       * locate 定位
       * liveVideo 实时视频
       * liveAudio 监听
       * videoCall 视频通话
       * audioCall 语音通话
       * takePicture 拍照
       * issueMessage 消息下发
       * favorite 收藏
       * track 跟踪
       * nearby 附近
       * deviceInfo 设备信息
       */
      //console.log(">>>>> [home]-->popupBtnClick(event,node, data)");

      if (event === 'liveVideo'){
        //实时视频
        this.playStart(node,data);
      }else if(event === 'deviceInfo'){
        //设备信息
        this.showDeviceIfo(data);
      }else if(event === 'videoCall'){
        //视频通话
        this.$refs.videoCallDialog.openDialog(data, null);

      }
    },
    //设备信息
    showDeviceIfo(data){
      console.log("showDeviceIfo: 有错误，会崩溃，暂停使用 %o", data);
      //this.$refs.deviceInfo.openDialog(data, null);
    }
  },
  created() {
    ;
  },
  mounted() {
    this.activePanel = 1;
    const _this = this;
    this.$nextTick(()=>{
      if (!!_this.$refs.leftDivId.offsetWidth){
        _this.leftBtn.boxWidth = _this.$refs.leftDivId.offsetWidth;
      }
      _this.leftBtn.buttonStyle.left = _this.leftBtn.boxWidth + "px";
    });
    //console.log(">>>>>>>>> commDispatch.mounted: width=%o",this.$refs.leftDivId.offsetWidth );
  }

}
</script>

<style lang="less" scoped>
   div{
     height: 100%;
   }
   //Chrome 浏览器隐藏滚动条
/*
   *::-webkit-scrollbar {
     display: none;
   }
*/
</style>
<style lang="less">
  //@import "./Moudle/style/CommandDispatch-bright";
  .command-dispatch-main{
    width: 100%;
    height: 100%;
    //border: 1px solid #aff;
    display: flex;
    flex-direction: column;
    .head-content{
      width: 100%;
      height: 64px;
    }
    .main-content{
      width: 100%;
      height: 100%;
      //background: #00060c;
      display: flex;
      flex-direction: row;
      .device-list{
        width: 400px;
        height: 100%;
        overflow: auto;
        //background: #056b05;
      }
      //滚动条设置
      .device-list::-webkit-scrollbar { /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 10px;
      }

      .device-list::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0,0.3);
        background: rgba(0, 0, 0,0.1);
      }

      .map-content{
        width: 100%;
        height: 100%;
        //border: 1px solid #056b05;
        //background: #0b54dc;

      }
    }

  }
  .left-expland-collapsible-button{
    height: 37px !important;
    width: 37px;
    position: fixed;
    left: 351px;
    top: calc(~"(100% - 64px - 37px) / 2");
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-radius: 2px;
    //background: #aeaeae;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }

  .other-modal{
    position: fixed;
    display: none;
  }

  .tag-class{
    cursor: pointer;
    font-size: 16px;
    height: 34px;
  }


</style>
